<template>
  <div>
    <el-dialog :close-on-click-modal="false" title="团队报名" :visible.sync="dialogAdd" width="700px" @close="close"
      id="add-players">
      <el-form class="form-add" label-width="100px">
        <el-form-item class="input500 must-input" label="队伍名称：" prop="name">
          <el-input v-model="formAdd.groupName" maxlength="20" show-word-limit placeholder="输入队伍名称"></el-input>
        </el-form-item>
        <el-form-item class="input500" label="导师姓名：" prop="name">
          <el-input v-model="formAdd.teacherName" maxlength="20" show-word-limit placeholder="输入导师姓名"></el-input>
        </el-form-item>
        <el-form-item class="input500" label="导师手机：" prop="name">
          <el-input v-model="formAdd.teacherPhone" maxlength="11" show-word-limit placeholder="输入导师手机"></el-input>
        </el-form-item>
        <el-form-item label="添加队员：" prop="name">
          <span @click="addUser" class="el-icon-circle-plus blue"></span>
          <span>
            注：若队员从未在系统中注册，队员的登录密码默认为000000，登录后可更改
          </span>
        </el-form-item>
        <el-form-item label="队员数量：" prop="name">
          <span>{{  formGroupNum  }}</span>人
        </el-form-item>
      </el-form>
      <div class="add-userlist">
        <el-form v-for="(item, index) in formAdd.lists" :key="index" class="form-add" label-width="100px">
          <el-form-item label="手机号：" prop="name">
            <el-input @keyup.native="getUserInfo(item, index)" v-model="item.telephoneNumber" maxlength="11"
              show-word-limit placeholder="请输入手机号"></el-input>
            <span @click="deleteUser(index)" class="el-icon-remove blue"></span>
          </el-form-item>
          <el-form-item label="姓名：" prop="name">
            <el-input v-model="item.name" maxlength="10" show-word-limit placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="专业：" prop="name">
            <el-input v-model="item.major" maxlength="50" show-word-limit placeholder="请输入专业"></el-input>
          </el-form-item>
          <el-form-item label="班级：" prop="name">
            <el-input v-model="item.className" maxlength="50" show-word-limit placeholder="请输入班级"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer" style="text-align: center">
        <button v-if="number" class="button-style saveBtn" @click="updatePlayers">
          修 改
        </button>
        <button v-else class="button-style saveBtn" @click="addPlayers">确 认</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formGroupNum: 0,
      //修改id
      number: "",
      courseId: "",
      //添加选手
      formAdd: {
        groupName: "",
        teacherName: '',
        teacherPhone: '',
        //团队添加列表
        lists: [
        ],
      },
      dialogAdd: false,
    };
  },
  created() {
    this.courseId = this.$localstorage.getLocalStorage("setCourseId");
    console.log(this.courseId, 22222);
    this.init();
  },
  methods: {
    init() {
      this.getInfo();
    },
    showDialog(number) {
      this.number = number;
      //报名回显
      if (number) {
        this.getList();
      }
      this.dialogAdd = true;
    },
    //获取信息
    getInfo() {
      this.$http
        .get(`/tes/match/info/${this.courseId}`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.formGroupNum = res.data.formGroupNum;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //通过手机号获取用户信息
    getUserInfo(item, index) {
      console.log(item.telephoneNumber);
      if (item.telephoneNumber.length == 11) {
        this.$http
          .get(`/tes/unauthorized/userInfo?userNumber=${item.telephoneNumber}`)
          .then((response) => {
            let res = response.data;
            if (res.code == "200") {
              if (res.data) {
                this.formAdd.lists[index].name = res.data.name;
                this.formAdd.lists[index].major = res.data.major;
                this.formAdd.lists[index].className = res.data.className;
              }
              console.log(res.data, 123);
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.$message.error(res.message);
            console.log(err);
          });
      }
    },
    //团队报名回显
    getList() {
      // this.formAdd = '';
      this.$http
        .get(`/tes/apply/apply-tea/info-group?number=${this.number}`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            console.log(res.data, 123);
            const list = res.data.lists;
            for (let i = 0; i < list.length; i++) {
              this.addUser();
            }
            this.formAdd = res.data;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(res.message);
          console.log(err);
        });
    },
    close() {
      this.dialogAdd = false;
      this.clearList();
    },
    //添加
    addPlayers() {
      this.$http
        .post(`/tes/apply/apply-tea/save-group/${this.courseId}`, this.formAdd)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$message.success(res.message);
            this.$parent.init();
            this.close();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(res.message);
          console.log(err);
        });
    },
    //修改
    updatePlayers() {
      this.formAdd.number = this.number;
      this.$http
        .post(`/tes/apply/update/group/${this.courseId}`, this.formAdd)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$parent.init();
            this.$message.success(res.message);
            this.close();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(res.message);
          console.log(err);
        });
    },

    //清除
    clearList() {
      this.formAdd.groupName = "";
      this.formAdd.teacherName = "";
      this.formAdd.teacherPhone = "";
      this.number = "";
      this.formAdd.lists = [];
    },
    add() {
      this.dialogAdd = true;
      this.addUser();
    },
    //添加队员
    addUser() {
      console.log(666);
      if (this.formAdd.lists.length == this.formGroupNum) {
        this.$message.warning("报名人数已达上限");
        return;
      }
      this.formAdd.lists.unshift({
        telephoneNumber: "",
        name: "",
        major: "",
        className: "",
      });
    },
    //删除人员
    deleteUser(index) {
      if (this.formAdd.lists.length == 1) {
        return;
      }
      this.formAdd.lists.splice(index, 1);
    },
  },
};
</script>
<style lang="scss">
#add-players {
  .input500 {
    .el-input__inner {
      width: 500px;
    }
  }
.must-input {
    .el-form-item__label::before {
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
      }
}
  .add-userlist {
    .form-add {
      border-bottom: 1px dashed #ccc;
      margin-bottom: 20px;

      .el-input__inner {
        width: 500px;
      }
      .el-form-item__label::before {
        content: '*';
        color: #F56C6C;
        margin-right: 4px;
      }
    }
  }

  .form-add {
    .el-input {
      width: auto;

      .el-input__count-inner {
        background: none;
      }

      .el-input__inner {
        padding-right: 50px;
      }
    }
  }

  .blue {
    font-size: 18px;
    cursor: pointer;
    color: #1277eb;

    &:hover {
      opacity: 0.9;
    }
  }
}
</style>
